<template>
  <div id="personal">
    <!-- 顶部导航栏 -->
    <van-nav-bar left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" />
      </template>
    </van-nav-bar>

    <!-- 图片 -->
    <div>
      <van-image src="/images/integralTaskBackground/dog.jpg" fit="contain" />
    </div>

    <!-- 签到部分 -->
    <div class="sign_in">
      <div>
        <span>拥有积分:</span>
        <span style="color: #ff8d1a;padding-top: 20px;padding-left: 4px">{{score}}</span>
      </div>
      <span class="fenge"></span>
      <div>
        <van-button color="rgba(243, 176, 79, 0.5)" hairline style="border-radius: 10px"
        @click="signIn"
        >{{sign}}</van-button
        >
      </div>
    </div>

    <!-- 任务列表 -->
    <div class="mission">
      <span style="font-size: 14px; color: #8c8c8c">做任务赚积分</span>
      <van-cell-group>
        <van-cell title="邀请新人注册" icon="smile-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="分享趣事" icon="location-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="每日求助" icon="good-job-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="修改个人资料" icon="edit" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="帮助他人" icon="manager-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="今天你喜欢了嘛?" icon="like-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
        <van-cell title="逛逛商城" icon="shop-o" label="获得积分+60">
          <template #right-icon>
            <van-button
              plain
              hairline
              size="small"
              color="#FF8E8E"
              round
              type="info"
              >待完成</van-button
            >
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Toast} from "vant";

export default {
  data() {
    return {
      sign: '签到',
      score: null
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
  created() {
    this.axios.get("http://localhost:10002/ums/userDetail/score/"+
        this.userinfo.id).then(response =>{
      if(response.data.state==200){
        this.score = response.data.data
        console.log("积分",response.data.data)
      }else {
        console.log("意外",response.data.data)
      }
    })
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
    signIn(){
/*      if(this.sign=='已签到'){
        Toast('你已经签到')
        return
      }*/
      const url = "http://localhost:10002/ums/SignIn/addSign"
      const dat = {
        userId: this.userinfo.id
      }
      this.axios.post(url,dat).then(response =>{
          if(response.data.state){
            this.axios.get("http://localhost:10002/ums/userDetail/score/"+
                this.userinfo.id).then(response =>{
              if(response.data.state==200){
                this.score = response.data.data
                console.log("积分",response.data.data)
              }else {
                console.log("意外",response.data.data)
              }
            })
            console.log("签到成功",response.data.data)
            Toast('签到成功')
            this.sign = '已签到'
          }else {
            Toast("你已经签到")
            console.log(response.data.data)
          }
      })
    }
  },
};
</script>

<style scoped>
/* 去除导航栏底边白边 */
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}

/* 固定位置 */
#personal {
  margin: 0;
  padding: 0;
  position: relative;
}

/* 签到部分 */
.sign_in {
  position: absolute;
  display: inline-block;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px 14px;
  padding: 4px;
  border-radius: 15px;
  top: 170px;
  width: 337px;
  background-color: white;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 2px 1px rgba(226, 222, 222, 0.6);
}
.fenge {
  padding: 20px 11px 0px 0px;
  margin-right: 3px;
  margin-left: 3px;
  border-left: 1px solid #000;
  font-size: 0;
}

/* 任务列表 */
.mission {
  margin: 25px 14px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  box-shadow: 1px 3px 2px 1px rgba(226, 222, 222, 0.6);
}
.mission span {
  margin: 2px;
}

/* 人物列表label颜色 */
.van-cell__label {
  color: #eda8f1;
}
</style>